import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:katana_router/katana_router.dart';
import 'package:thal/backstage/toolkit/utilities/color_palette.dart';
import 'package:thal/backstage/toolkit/utilities/dimension_rules.dart';
import 'package:thal/backstage/toolkit/utilities/asset_manifest.dart';
import 'package:thal/playbill/auth_sage/login_production.dart';

/// 认证聚光灯 - 登录要求弹窗
/// 当用户未登录时，引导用户登录的弹窗
///
/// 使用示例：
/// ```dart
/// // 检查登录状态并显示弹窗
/// AuthenticationSpotlight.illuminate(context);
///
/// // 或者在按钮点击时检查
/// if (!userRoom.isLoggedIn) {
///   AuthenticationSpotlight.illuminate(context);
///   return;
/// }
/// ```
class AuthenticationSpotlight {
  /// 私有构造函数，防止实例化
  AuthenticationSpotlight._();

  /// 点亮聚光灯 - 显示登录弹窗
  static void illuminate(BuildContext context) {
    showDialog(
      context: context,
      barrierDismissible: true,
      barrierColor: ColorPalette.black.withValues(alpha: 0.7),
      builder: (context) => const _SpotlightDialog(),
    );
  }
}

/// 聚光灯弹窗内部组件
class _SpotlightDialog extends StatelessWidget {
  const _SpotlightDialog();

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.transparent,
      insetPadding: EdgeInsets.symmetric(horizontal: 32.w),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          // 主弹窗内容
          Container(
            decoration: BoxDecoration(
              color: ColorPalette.white,
              borderRadius: BorderRadius.circular(24.r),
              boxShadow: [
                BoxShadow(
                  color: ColorPalette.blue1.withValues(alpha: 0.3),
                  blurRadius: 30,
                  spreadRadius: 10,
                  offset: const Offset(0, 10),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 顶部装饰区域
                Container(
                  height: 120.h,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        ColorPalette.blue1,
                        ColorPalette.blue2,
                        ColorPalette.blue3,
                      ],
                    ),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(24.r),
                      topRight: Radius.circular(24.r),
                    ),
                  ),
                  child: Stack(
                    children: [
                      // 装饰圆圈
                      Positioned(
                        top: -20.h,
                        right: -20.w,
                        child: Container(
                          width: 100.w,
                          height: 100.h,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: ColorPalette.white.withValues(alpha: 0.1),
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: -30.h,
                        left: -30.w,
                        child: Container(
                          width: 120.w,
                          height: 120.h,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: ColorPalette.white.withValues(alpha: 0.1),
                          ),
                        ),
                      ),
                      // 锁图标
                      Center(
                        child: Container(
                          width: 60.w,
                          height: 60.h,
                          decoration: BoxDecoration(
                            color: ColorPalette.white,
                            border: Border.all(
                              color: ColorPalette.white,
                              width: 3.w,
                            ),
                            borderRadius: BorderRadius.circular(12.r),
                            boxShadow: [
                              BoxShadow(
                                color: ColorPalette.black.withValues(
                                  alpha: 0.1,
                                ),
                                blurRadius: 10,
                                spreadRadius: 2,
                              ),
                            ],
                          ),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(12.r),

                            child: Image.asset(
                              AssetManifest.logo,
                              width: 60.w,
                              height: 60.h,
                              fit: BoxFit.contain,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

                // 内容区域
                Column(
                  children: [
                    // 标题
                    Text('Login Required')
                        .fontSize(24.sp)
                        .textColor(ColorPalette.black)
                        .arimo(weight: FontWeight.bold),

                    12.h.heightBox,

                    // 描述文字
                    Text(
                          'Please login to access this feature\nand enjoy the full experience',
                          textAlign: TextAlign.center,
                        )
                        .fontSize(14.sp)
                        .textColor(ColorPalette.black.withValues(alpha: 0.6))
                        .arimo(),

                    28.h.heightBox,

                    // 登录按钮
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                          context.router.push(LoginProduction.query());
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: ColorPalette.blue1,
                          foregroundColor: ColorPalette.white,
                          padding: EdgeInsets.symmetric(vertical: 14.h),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12.r),
                          ),
                          elevation: 0,
                          shadowColor: Colors.transparent,
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.login_rounded, size: 20.sp),
                            8.w.widthBox,
                            Text(
                              'Go to Login',
                            ).fontSize(16.sp).arimo(weight: FontWeight.w600),
                          ],
                        ),
                      ),
                    ),

                    12.h.heightBox,

                    // 稍后再说按钮
                    SizedBox(
                      width: double.infinity,
                      child: TextButton(
                        onPressed: () => Navigator.of(context).pop(),
                        style: TextButton.styleFrom(
                          foregroundColor: ColorPalette.black.withValues(
                            alpha: 0.6,
                          ),
                          padding: EdgeInsets.symmetric(vertical: 14.h),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12.r),
                          ),
                        ),
                        child: Text(
                          'Maybe Later',
                        ).fontSize(14.sp).arimo(weight: FontWeight.w500),
                      ),
                    ),
                  ],
                ).wrapAll(24.w),
              ],
            ),
          ),

          // Panda 装饰图片 - 在弹窗右上角，可以超出边界
          Positioned(
            top: -80.h,
            right: -60.w,
            child: Transform.rotate(
              angle: 0.05,
              child: Image.asset(
                AssetManifest.panda,
                width: 220.w,
                height: 220.h,
                fit: BoxFit.contain,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
